<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>绑定样式</title>
    <style>
        .basic{
            width:400px ;
            height: 100px;
            border: 1px solid black;
        }
        .happy{
            border: 4px solid rgb(0, 0, 0);
            background-color: palevioletred;
        }
        .sad{
            border: 4px solid rgb(0, 0, 0);
            background-color: rgb(0, 139, 253);
        }
        .normal{
            background-color: rgb(158, 124, 227);
        }
        .yy1{
            background-color:rgb(232, 138, 138)
        }
        .yy2{
            font-size: 30px;
            text-shadow: 2px 2px 10px rgb(255, 255, 98);
        }
        .yy3{
            border-radius: 20px;
        }
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <!--绑定class样式（字符串写法），适用于样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
        <!--绑定class样式（数组写法），适用于要绑定的样式的个数不确定、名字也不确定 -->
        <div class="basic" :class="classArr">{{name}}</div>
        <!--绑定class样式（对象写法），适用于要绑定的样式个数确定，名字确定，但要动态决定用不用 -->
        <div class="basic" :class="classObj">{{name}}</div>
        <!--绑定style样式 对象写法 -->
        <div class="basic" :style="styleObj">{{name}}</div>
        <!--绑定style样式 数组写法 -->
        <div class="basic" :style="[styleObj,styleObj2]">{{name}}</div>
    </div>
</body>
<!--   JS   -->
    <script>
        const vm = new Vue({
        el:'#root',
        data:{
            name:'陆沉',
            mood:'normal',
            classArr:['yy1','yy2','yy3'],
            classObj:{
                yy1:true,
                yy2:false
            },
            styleObj:{
                fontSize:'40px',
                color:'grey'
            },
            styleObj2:{
                backgroundColor:'black'
            }
        },
        methods: {
            /* changeMood(){
                this.mood='happy'
            } */
            changeMood(){
                const arr = ['happy','sad','normal']
                const index = Math.floor(Math.random()*3)
                this.mood = arr[index]
            }
        },
    })
    </script>
</html>